<template>
  <div>
    <div class="box" v-for="item1 in detailslist" :key="item1">
      <p>{{item1.product_name}}</p>
      <el-divider></el-divider>
      <div class="main">
        <div class="block">
          <el-carousel  height="600px">
            <el-carousel-item v-for="item in detailstu" :key="item">
                <img :src="'http://101.132.181.9:3000/' + item.product_picture" alt="" width="100%">
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="right" v-for="item1 in detailslist" :key="item1">
            <div class="top">
                <p class="p1">{{item1.product_name}}</p>
                <p class="p2">
                  {{item1.product_intro}}
                </p>
                <p class="p3">小米自营</p>
                <p class="p3">{{item1.product_selling_price}}元</p>
            </div>
           <div class="down">
                <div class="box1">
                      <div class="box-11">
                        <p>{{item1.product_name}}</p>
                        <p>{{item1.product_selling_price}}元 &emsp;<s>{{item1.product_price}}元</s></p>
                      </div>
                      <div class="box-12">总计：{{item1.product_selling_price}}</div>
                </div>
                <div class="box2">
                     <button class="join" @click="getAddShopCart">加入购物车</button>
                     <button class="like" @click="addCollect">喜欢</button>
                </div>
                <div class="box3">
                    <ul>
                        <li class="el-icon-circle-check">小米自营</li>
                        <li class="el-icon-circle-check">小米发货</li>
                        <li class="el-icon-circle-check">7天无理由退货</li>
                        <li class="el-icon-circle-check">7天价格保护</li>
                    </ul>
                </div>
           </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getDetails,getDetailsTu,addCollect,AddShopCart}  from '../api/api'
export default {
  name:"details",
  data() {
    return {
       id:"",//商品id
       detailstu:[],//轮播图数据
       detailslist:[],
    }
  },
  created(){
      this.id=this.$route.params.productID;
      // console.log(this.id,"id");
      this.getList()
      this.getListTu()
  },
  methods:{
    async getAddShopCart(){//加入购物车
      // console.log(123)
       let res=await AddShopCart({
         user_id: this.$store.getters.getUser.user_id,
         product_id:this.id
       })
       if(res.code=="001"){
        this.$message.success(res.msg)
       }else{
          this.$message(res.msg)
       }
       console.log(res,72)
    },
    async addCollect(){//点击喜欢添加到收藏
       let res=await addCollect({ user_id: this.$store.getters.getUser.user_id,product_id:this.id})
      //  console.log(res,70)
       if(res.code=="001"){
            this.$message(res.msg);
       }else{
           this.$message(res.msg);
       }  
    },
    async getList(){//详情数据
      let res=await getDetails({productID:this.id})
      // console.log(res,'sj')
     this.detailslist=res.Product
    },
    async getListTu(){//图片数据
      let res=await getDetailsTu({productID:this.id})
      // console.log(res,'tu')
      this.detailstu=res.ProductPicture
    }
  }
};
</script>

<style lang="scss" scoped>
ul{
    list-style: none;
}
.box {
  width: 1200px;
  background-color: white;
  margin: 0 auto;
}
.main {
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 600px;
}
.block {
  width: 50%;
  height: 450px;
  background-color: white;
}
.right {
  width: 50%;
  height: 100%;
  display: flex;
  background-color: pink;
  flex-direction: column;
}
.top{
    width: 100%;
    height: 50%;
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    border-bottom: 1px solid rgb(179, 172, 172);
}
.p1{
    font-size: 25px;
}
.p2{
    color: gray;
    font-size: 18px;
}
.p3{
    color: orange;
    font-size: 20px;
}
.down{
    width: 100%;
    height: 50%;
    background-color: white;
    display: flex;
    flex-direction: column;
}
.box1{
    width: 100%;
    height: 120px;
    background-color: rgb(203, 198, 198,0.3);
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  
}
.box-11{
    display: flex;
    justify-content: space-around;
    width: 100%;
    color: grey;
    font-size: 18px;
}
.box-12{
    margin-left: 120px;
    font-size: 25px;
    color: orange;
}
.box2{
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin-top: 40px;
}
.join{
    width: 250px;
    height: 50px;
    background-color: orange;
    border-radius: 5px;
    color: white;
}
.like{
    width: 250px;
    height: 50px;
    background-color:grey;
    border-radius: 5px;
    color: white;
}
.box3{
    li{
        float: left;
        color: grey;
        margin-left: 20px;
        font-size: 18px;
    }
    margin-top: 20px;
}
</style>